<style lang="less">
    @import './style';
</style>

<template>
    <div class="ylb-component-rollpad" :class="class" :style="style">
        <div class="title">{{title}}</div>
        <!-- <div class="body" :data-i="realValue" v-show="numbers>0" transition="body"> -->
        <div class="body" :data-i="realValue" v-show="numbers>0">
            <canvas></canvas>
        </div>
    </div>
</template>

<script type="text/babel">
    import Panel from './panel';
    import animation from './animation';
    import {layout,fontSize,fontFamily,scal} from './config';

    const AnimeRender =
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };

    var animeQueue = [];

    let vm,Q,canvas,body,height;

    export default {
        data:()=>({
            panels:[],
            oldValue:0
        }),
        props:{
            numbers:{
                type: Number,
                default:0
            },
            value:{
                type: Number,
                default:0
            },
            title:{
                type: String,
                default:'娱乐宝投资总金额（元）'
            },
            class:{
                type: String,
                default:''
            }
        },

        computed:{
            style:function(){
                return {
                    // height:this.numbers==0?'42px':(62+layout.panelHeight) + 'px'
                    // 为了性能，忍痛割动画
                    height:(62+layout.panelHeight) + 'px'
                }
            }
        },

        methods:{
            calculateAnimation :function (nv,ov){
                var delta = Math.abs(nv - ov);
                //大于6亿时创建大动画
                if(delta>600000000){
                    animation.huge(this.panels,nv,ov);
                }else{
                //简短动画
                    animation.small(this.panels,nv,ov);
                }
            },
            init:function(){

                //计算布局
                this.panels.forEach(p=>p.destory());
                this.panels = [];

                var fontStyle = fontSize*scal + 'px ' + fontFamily;
                var reduce = 0;
                for(var i = 1;i<=this.numbers;i++){
                    if(this.numbers-i<layout.zero){
                        this.panels.push(new Panel(reduce,this,'a1208.;\',d*@#%^&'));
                    }else{
                        this.panels.push(new Panel(reduce,this));
                    }

                    reduce+= layout.panelWidth;
                    if(i!=this.numbers){
                        reduce+= (this.numbers-i)%3==0? layout.dotMargin : layout.panelMargin;
                    }
                }

                var w = reduce;
                var h = layout.panelHeight;

                body.style.width = w + 'px';
                body.style.height = h + 'px';

                canvas.width = w*scal;
                canvas.height = h*scal;
                canvas.style.width = w + 'px';
                canvas.style.height = h + 'px';

                Q.font = fontStyle;
                Q.fillStyle = '#000';

            }
        },

        created:function(){
            vm = this;
        },

        ready:function(){

            body = vm.$el.children[1];
            canvas = document.querySelector('.ylb-component-rollpad canvas');
            Q = canvas.getContext('2d');

            //渲染动画时机
            var render = function(){
                //通知各个Panel更新视图
                this.panels.forEach(function(p){
                    animeQueue.push(p.stab(Date.now()));
                })
                //绘制
                animeQueue.forEach(function(f){
                    if(f instanceof Function)f(Q);
                })
                //清空绘制队列
                animeQueue = [];
                //预约渲染下一帧
                AnimeRender(render);
            }.bind(this);
            render();

            //绘制列表中追加绘制动作
            this.addAnime = function(f){
                animeQueue.push(f);
            }

            vm.$watch('numbers', function (v) {
                if(v>0){
                    this.init();
                }
            })

            vm.$watch('value', function (v) {
                this.calculateAnimation(v,this.oldValue);
                this.oldValue = v;
            })


        }
    }



</script>